<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue系列课程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>


        <!--路径切换路由: 根据请求路径切换显示不同组件-->
        <!--切换路由链接-->
        <a href="#/login">用户登录</a>
        <a href="#/register">用户注册</a>

        <!--切换路由标签  router-link  标签必须加入 to属性 to="路由路径" -->
        <router-link to="/login">用户登录</router-link>
        <router-link to="/register">用户注册</router-link>

        <!--切换路由标签-->
        <router-link :to="{path:'/login'}">用户登录</router-link>
        <router-link :to="{path:'/register'}">用户注册</router-link>

        <!--名称切换路由: 根据路由对象名称切换路由显示不同组件 根据路由名称切换路由只能使用router-link  推荐使用命名路由-->
        <router-link :to="{name:'Login'}">用户登录</router-link>
        <router-link :to="{name:'Register'}">用户注册</router-link>



        <!--展示路由组件标签-->
        <router-view/>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //login
    const login =  {
        template:`<div><h4>用户登录</h4></div>`
    };
    //register
    const register =  {
        template:`<div><h4>用户注册</h4></div>`
    };

    //1.创建路由规则对象
    const router = new VueRouter({
        routes:[
            //name:这个属性代表路由对象名称  用来给路由对象一个唯一名称标识
            {path:'/login',component:login,name:'Login'},
            {path:'/register',component:register,name:'Register'},
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            msg:"vue router 基本使用之使用router-link切换路由"
        },
        methods:{},
        router,//注册路由对象
    });
</script>